<script lang='ts' setup>
import { AxiosResponse } from 'axios'
import { reactive, ref, Ref } from 'vue'
import DictionaryApi from '/@/api/org/bean/dictionary'
import { useStore } from '/@/store'
const DictionaryFormRef = ref()

const props = defineProps({
    dictionaryId: {
        type: String,
        default: ''
    },
    codeItemId: {
        type: String,
        default: ''
    }
})

const emit = defineEmits<{
    (e: 'save-success', data: any, res: any): void // 保存成功回调
}>()

const orgId = useStore().state.user.orgId;

const DictionaryFormState = reactive({
    primaryKey: 'dictionaryId',
    formStatus: null,
    rules: {
        codeId: [{ required: true, message: '请输入字典项编码', trigger: 'blur' }],
        codeName: [{ required: true, message: '请输入字典项名称', trigger: 'blur' }],
    },
    /** 提交成功处理 */
    onSaveSuccess: (data: any, res: AxiosResponse<any>) => {
        emit('save-success', data, res)
    },
    saveInsertFunction: (formData: any) => {
        formData.codeItemId = props.codeItemId;
        formData.updatable = true;
        formData.orgId = orgId;
        return DictionaryApi.saveInsert(formData)
    }
})

const DictionaryData: Ref<any> = ref({
    dictionaryId: props.dictionaryId,
    codeItemId: props.codeItemId
})

defineExpose({
    save: () => {
        DictionaryFormRef.value.save()
    }
})

</script>
<template>
    <jxtech-model-form
        ref="DictionaryFormRef"
        v-model:formStatus="DictionaryFormState.formStatus"
        :service-api="DictionaryApi"
        :primary-key="DictionaryFormState.primaryKey"
        :form-data="DictionaryData"
        :rules="DictionaryFormState.rules"
        :save-insert-function="DictionaryFormState.saveInsertFunction"
        @save-success="DictionaryFormState.onSaveSuccess"
    >
        <el-row>
            <el-col :span="21" :offset="1">
                <el-row :gutter="24">
                    <el-col>
                        <jxtech-model-form-item label="类型编码">
                            <el-input v-model="props.codeItemId" disabled></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col>
                        <jxtech-model-form-item label="字典项编码" prop="codeId">
                            <el-input v-model="DictionaryData.codeId" placeholder="请输入 字典项编码" :disabled="DictionaryFormState.formStatus=='edit'"></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col>
                        <jxtech-model-form-item label="字典项名称" prop="codeName">
                            <el-input v-model="DictionaryData.codeName" placeholder="请输入 字典项名称"></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col>
                        <jxtech-model-form-item label="排序号" prop="orderNum">
                            <el-input v-model="DictionaryData.orderNum" placeholder="请输入排序"></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </jxtech-model-form>
</template>